<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的绑定</title>
</head>
<body>
    <button id="btn01">00 按钮 00</button>
</body>
</html>
<script>
    // 获取按钮对象
    var btn01 = document.getElementById("btn01");
    /*
        使用 对象.事件 = 函数 的形式绑定响应函数，⭐
            他只能同时为 一个元素的 一个事件 绑定 一个响应函数
            不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
    */

    // 为 btn01 绑定一个单击响应函数
    // btn01.onclick=function(){
    //     alert("3");
    // };

    // 为 btn01 绑定第二个单击响应函数

    /*
        addEventListener() ⭐⭐📌
            - 通过这个方法也可以为元素绑定响应函数
            - 参数
                1.事件的字符串，不要on 如： click
                2.回调函数，当事件触发时，该函数会被调用
                3.是否在捕获阶段触发事件，需要一个布尔值，一般都穿false
            
            使用addEventListener() 可以同时为一个元素的相同事件，同时绑定多个响应函数，
                这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
    */

    btn01.addEventListener("click",function(){
        alert("1");
    },false);
    btn01.addEventListener("click",function(){
        alert("2");
    },false);

</script>